<script lang="ts" setup>
import { ref } from 'vue'
import router from '@/router'
import SpiritIcon from '@/components/icons/SpiritIcon.vue'

const data = ref([
  {
    icon: 'cube',
    footer: '应用管理',
    to: '/console/program'
  },
  {
    icon: 'safe',
    footer: '授权管理',
    to: '/console/authentication'
  },
  {
    icon: 'globe',
    footer: '用户管理',
    to: '/admin/user'
  },
  {
    icon: 'store',
    footer: '订单管理',
    to: '/admin/order'
  },
  {
    icon: 'code',
    footer: '代码加密',
    to: '/admin/encryption'
  },
  {
    icon: 'count',
    footer: '工单系统',
    to: '/admin/order'
  },
  {
    icon: 'cycle',
    footer: '支付设置',
    to: '/admin/pay'
  },
  {
    icon: 'wifi',
    footer: '网站设置',
    to: '/admin/web_set'
  }
])
</script>

<template>
  <t-row>
    <t-card header-bordered title="常用功能">
      <t-row>
        <t-col :lg="6" :md="6" :sm="6" :xl="6" :xs="12" class="group">
          <t-col v-for="(item, index) in data.slice(0, 4)" :key="index" :span="3" class="item">
            <div @click="router.push(item.to)">
              <div><SpiritIcon :icon="item.icon" /></div>
              <div class="footer">{{ item.footer }}</div>
            </div>
          </t-col>
        </t-col>
        <t-col :lg="6" :md="6" :sm="6" :xl="6" :xs="12" class="group">
          <t-col v-for="(item, index) in data.slice(-4)" :key="index" :span="3" class="item">
            <div @click="router.push(item.to)">
              <div><SpiritIcon :icon="item.icon" /></div>
              <span class="footer">{{ item.footer }}</span>
            </div>
          </t-col>
        </t-col>
      </t-row>
    </t-card>
  </t-row>
</template>

<style lang="sass" scoped>
.t-row
  margin: 20px 0
  width: 100%
  .t-card
    width: 100%
    .group
      display: flex
      .item
        display: flex
        align-items: center
        justify-content: center
        cursor: pointer
        .footer
          text-align: center
          color: #909399
</style>
